<template>
  <view class="myTerminalMain">
    <view class="myTerminalBox">
      <u-sticky :enable="enable">
			<view class="myTerminalSearch solid-bottom">
				<view class="totalView" @click="snStatusTap">
					{{itemTitle}}
					<u-icon class="uIcon" name="arrow-down-fill" color="#999" size="16"></u-icon>
				</view>
				<u-search class="myTerminalSearchInput" placeholder="请输入机具号进行搜索" bg-color="#fff" shape="square" :show-action="true" v-model="sn_code" :clearabled="true" @search="inputChange" @custom="inputChange"></u-search>
			</view>
			</u-sticky>
      <view class="myTerminalBody">
        <view v-if="list.length > 0">
          <view
            :class="[
              item.active_time == '0' ? 'myTerminalItem noActive' : 'myTerminalItem ',
            ]"
            v-for="(item, index) in list"
            :key="index"
            @tap="$u.route({url:'/pages/inventoryManagement/myMachinesDetail',params:item})"
          >
            <view class="machine_code">
              <text>机具编号</text>
              <text>{{ item.number }}</text>
            </view>
            <view class="otherInfo solid-top">
              <view>
                创建时间：<text>{{
                  $u.timeFormat(item.create_time, "yyyy-mm-dd hh:MM:ss")
                }}</text>
              </view>
              <view v-if="item.assign_time != 0">
                划拨时间：<text>{{
                  $u.timeFormat(item.assign_time, "yyyy-mm-dd hh:MM:ss")
                }}</text>
              </view>
              <view v-if="item.active_time != 0">
                激活时间：<text>{{
                  $u.timeFormat(item.active_time, "yyyy-mm-dd hh:MM:ss")
                }}</text>
              </view>
              <view v-if="item.mercNm">
                商户名称：<text>{{ item.mercNm }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="noMachine" v-if="list.length == 0 && isLoad">
          <image
            src="../../static/images/noData/zwsy.png"
            mode="widthFix"
          ></image>
          <text>暂无机具</text>
        </view>
      </view>
    </view>
    <u-loadmore
      style="padding: 40rpx 0"
      :status="status"
      @loadmore="loadmore"
      v-if="list.length > 0"
    />
    <u-toast ref="uToast" />
    <toast></toast>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      list: [],
      sn_code:"",
      itemTitle:"全部",
	  itemList:['全部','未激活','已激活'],
      status: "loadmore",
      noMore: false,
      page: 1,
      limit: 10,
      sn_status:0,
      isLoad: false
    };
  },
  onLoad() {
    this.getMyMachinesList();
  },
  onShow() {
		this.enable = true;
	},
	onHide() {
		this.enable = false;
	},
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    getMyMachinesList() {
      this.$u.api
        .getMyMachines({
          sn_code:this.sn_code,
		  sn_status:this.sn_status,
          page: this.page,
          limit: this.limit,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result;
            if (this.page == 1 && datas.length == 0) {
              this.noMore = true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.limit) {
              this.noMore = true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.limit) {
              this.noMore = true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.limit) {
              this.status = "loading";
            }
            this.list = this.list.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    // 点击下载更多
    loadmore() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.page = ++this.page;
        this.status = "loadmore";
        this.getMyMachinesList();
      }
    },
     inputChange(e){
			this.isLoad = false;
			this.sn_code = e;
			this.status = 'loadmore';
			this.noMore=false;
			this.page = 1;
			this.list = [];
			this.getMyMachinesList();
		},
		snStatusTap(){
			let that = this;
			uni.showActionSheet({
			    itemList:this.itemList,
			    success: function (res) {
					that.isLoad = false;
					let index = res.tapIndex;
					that.itemTitle = that.itemList[index];
					that.sn_status = index;
					that.status = 'loadmore';
					that.noMore=false;
					that.list = [];
					that.page = 1;
					that.getMyMachinesList();
			    }
			});
		}
  },
  onReachBottom() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.page = ++this.page;
      this.getMyMachinesList();
    }
  },
  onPullDownRefresh() {
    this.isLoad = false;
    this.list = [];
    this.page = 1;
    this.getMyMachinesList();
  }
};
</script>

<style lang="scss">
.myTerminalBody {
  .myTerminalItem {
    padding: 30rpx;
    background-color: #fff;
    border-top: 10rpx solid #f1f1f1;
    position: relative;
    overflow: hidden;
    &::after {
      content: "已激活";
      display: block;
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 26rpx;
      background-color: #30b65f;
      color: #fff;
      position: absolute;
      right: 0px;
      bottom: 12px;
	  border-top-left-radius:40rpx;
	  border-bottom-left-radius:40rpx;
    }
    &.noActive::after {
      content: "未激活";
      background-color: #fb4535;
    }
    .machine_code {
      padding-bottom: 30rpx;
      padding-top: 5rpx;
      text {
        display: block;
        text-align: center;
        &:first-of-type {
          font-size: 28rpx;
          color: #333;
        }
        &:nth-of-type(2) {
          font-size: 40rpx;
          font-weight: bold;
          font-family: "numberFont";
          letter-spacing: 4rpx;
          padding-top: 10rpx;
        }
      }
    }
    .otherInfo {
      padding-top: 30rpx;
      view {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
}
.myTerminalSearch {
  background-color: #fff;
  height: 80rpx;
  width: 100%;
  overflow: hidden;
  padding-right: 20rpx;
  box-sizing: border-box;
  .totalView {
    width: 35%;
    height: 80rpx;
    float: left;
    line-height: 80rpx;
    border-right: 2rpx solid #f1f1f1;
    text-indent: 30rpx;
    position: relative;
    .uIcon {
      position: absolute;
      top: 50%;
      right: 16rpx;
      margin-top: -8rpx;
    }
  }
  .myTerminalSearchInput {
    height: 80upx;
    width: 65%;
    float: left;
  }
}
</style>
